<template>
  <div class="space-y-4">
    <div class="grid grid-cols-2 gap-4">
      <button
          v-for="design in currentDesigns"
          :key="design.id"
          @click="selectDesign(design.id)"
          class="min-h-[80px] relative aspect-[4/3] rounded-lg border-2 transition-all hover:border-indigo-500 overflow-hidden"
          :class="selectedDesignId === design.id ? 'border-indigo-600 shadow-lg' : 'border-gray-200'"
      >
        <object
            ref="svgObj"
            :data="design.previewUrl"
            type="image/svg+xml"
            class="svg-object"
        ></object>
        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent p-2">
          <div class="text-white text-sm font-medium truncate">
            {{ design.name }}
          </div>
          <div class="text-white/80 text-xs">
            ${{ design.price.toFixed(2) }}
          </div>
        </div>
      </button>
    </div>

    <div v-if="totalPages > 1" class="flex items-center justify-center gap-2 mt-4">
      <button
          @click="handlePrevPage"
          :disabled="currentPage === 1"
          class="p-1 rounded-md"
          :class="currentPage === 1 ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600 hover:bg-gray-100'"
      >
        <chevron-left class="w-5 h-5" />
      </button>

      <button
          v-for="page in totalPages"
          :key="page"
          @click="currentPage = page"
          class="rounded-md text-sm font-medium"
          :class="currentPage === page ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-100'"
      >
        {{ page }}
      </button>

      <button
          @click="handleNextPage"
          :disabled="currentPage === totalPages"
          class="p-1 rounded-md"
          :class="currentPage === totalPages ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600 hover:bg-gray-100'"
      >
        <chevron-right class="w-5 h-5" />
      </button>
    </div>
  </div>
</template>

<script>
import { ChevronLeft, ChevronRight } from 'lucide-vue';
import { mapState, mapActions } from 'vuex';

export default {
  components: {
    ChevronLeft,
    ChevronRight,
  },
  props: {
    productType: {
      type: String,
      required: true,
      validator: value => ['jersey', 'sock'].includes(value),
    },
  },
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 8, // Show 6 designs per page (2x3 grid)
    };
  },
  computed: {
    ...mapState({
      designs: state => state.designs.designs,
      selectedModelId: state => state.models.selectedModelId,
      selectedDesignId: state => state.designs.selectedDesignId,
    }),
    filteredDesigns() {
      return this.designs.filter(d =>
          d.productType === this.productType &&
          d.modelId === this.selectedModelId
      );
    },
    totalPages() {
      return Math.ceil(this.filteredDesigns.length / this.itemsPerPage);
    },
    currentDesigns() {
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.filteredDesigns.slice(startIndex, endIndex);
    },
  },
  methods: {
    ...mapActions('designs', ['setSelectedDesign']),
    selectDesign(designId) {
      this.setSelectedDesign(designId);
    },
    handlePrevPage() {
      this.currentPage = Math.max(1, this.currentPage - 1);
    },
    handleNextPage() {
      this.currentPage = Math.min(this.totalPages, this.currentPage + 1);
    },
  },
  watch: {
    filteredDesigns() {
      // Reset to first page when designs change
      this.currentPage = 1;
    },
  },
};
</script>
<style lang="scss">
.svg-object {
  width: 80px;
  height: 100px;

  :deep(svg) {
    width: 100%!important;
    height: 100%!important;
  }
}
</style>
